<template>
    <div>
      <a-modal
        @cancel="onCancel"
        :mask="true"
        :maskClosable="false"
        :visible="visible"
        title="重置密码"
        on-ok="handleOk"
      >
        <template slot="footer">
          <a-button key="back" @click="modalcancel"> 返回 </a-button>
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleOk"
          >
            确定
          </a-button>
        </template>
        <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
          <a-form :form="form" @submit="handleOk">
            <a-form-item
              label="旧密码"
              :labelCol="{ span: 7 }"
              :wrapperCol="{ span: 10 }"
              required
            >
              <a-input
                v-decorator="[
                  'oldpwd',
                  {
                    rules: [{ required: true, message: '密码不能为空!' }],
                  },
                ]"
                type="password"
                placeholder="请输入"
              />
            </a-form-item>
            <a-form-item
              label="新密码"
              :labelCol="{ span: 7 }"
              :wrapperCol="{ span: 10 }"
              required
            >
              <a-input
                v-decorator="[
                  'newpwd',

                  {
                    rules: [{ required: true, message: '密码不能为空!' }],
                  },
                ]"
                type="password"
                placeholder="请输入"
              />
            </a-form-item>
            <a-form-item
              label="确认密码"
              :labelCol="{ span: 7 }"
              :wrapperCol="{ span: 10 }"
              required
            >
              <a-input
                v-decorator="[
                  'confimPwd',
                  {
                    rules: [{ required: true, message: '密码不能为空!' }],
                  },
                ]"
                type="password"
                placeholder="请输入"
              />
            </a-form-item>
          </a-form>
        </a-card>
      </a-modal>
    </div>
  </template>
      <script>
  export default {
    props: {
      visible: {
        type: [Boolean],
        default: false,
      },
      modalcancel: {
        type: [Function],
        default: () => {},
      },
    },
    data() {
      return {
        form: this.$form.createForm(this),

        formData: {
          oldPwd: null,
          newPwd: null,
          confimPwd: null,
        },
        value: 1,
        loading: false,
      };
    },
    methods: {
      handleOk(e) {
        e.preventDefault();
        this.loading = true;
        this.form.validateFields((err, values) => {
          console.log("values: ", values);
          console.log("err: ", err);
          if (!err) {
            console.log("Received values of form: ", values);
            if (values?.newPwd !== values?.confimPwd) {
              console.log("输入不一致 ", values);
              this.$message.warn("输入不一致");
            }
          }
        });
        // setTimeout(() => {
        //   this.loading = false;

        // this.modalcancel();
        // }, 3000);
      },
      onCancel() {
        this.modalcancel();
      },
    },
  };
  </script>
